<template>
  <div class="address_edit">
    <div class="demo-nav">
      <div class="demo-nav__title">新增/修改地址</div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
    </div>
    <van-address-edit
      align="left"
      :area-list="areaList"
      :show-delete="isDelete"
      show-set-default
      show-search-result
      show-postal
      :address-info="AddressInfo"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
    />
  </div>
</template>

<script>

  import areaList from '@/utils/area';
  import { selectCustomerAddressById,insertCustomerAddr,updateCustomerAddr,deleteCustomerAddrById } from '@/api/customer/customer.js'
  import { Toast } from "vant";

  export default {
    name: "address_edit",
    inject:['reload'],
    data() {
      return {
        areaList,
        isDelete: true,
        AddressInfo:{
          id:null,
          name:null,
          tel:null,
          province:null,
          city:null,
          county:null,
          addressDetail: null,
          postalCode: null,
          areaCode:null,
          isDefault:null,
          customerAddrId:null,
        }
      };
    },
    created() {
      let customerAddrId = parseInt(this.$route.query.customerAddrId);
      let addressType = this.$route.query.addressType;
      if(addressType == 1){
        this.isDelete = false
      }else{
        this.isDelete = true
      }
      this.getCustomerAddressById(customerAddrId);
    },
    methods: {
      toBack() {
        //返回上一级页面
        this.$router.go(-1)
      },
      getCustomerAddressById(id){
        selectCustomerAddressById(id).then((res) =>{
          this.AddressInfo.id = res.data.data.customerAddrId;
          this.AddressInfo.customerAddrId = res.data.data.customerAddrId;
          this.AddressInfo.name = res.data.data.name;
          this.AddressInfo.tel = res.data.data.tel;
          this.AddressInfo.province = res.data.data.province;
          this.AddressInfo.city = res.data.data.city;
          this.AddressInfo.county = res.data.data.county;
          this.AddressInfo.addressDetail = res.data.data.addressDetail;
          this.AddressInfo.postalCode = res.data.data.postalCode;
          this.AddressInfo.areaCode = res.data.data.areaCode;
          if(res.data.data.isDefault == "1"){
            this.AddressInfo.isDefault = true
          }else{
            this.AddressInfo.isDefault = false
          }
        })
      },
      onSave(res) {
        if(res.id == null){
          if (res.isDefault == null){
            res.isDefault = "0"
          }else{
            res.isDefault = "1"
          }
          insertCustomerAddr(res).then((res) =>{
            if(res.data.code == 200){
              Toast({
                message: "添加成功",
                position: "top"
              });
              this.reload();
            }
          })
        }else{
          if (res.isDefault == false){
            res.isDefault = "0"
          }else{
            res.isDefault = "1"
          }
          updateCustomerAddr(res).then((res) => {
            if(res.data.code == 200){
              Toast({
                message: "修改成功",
                position: "top"
              });
              this.reload();
            }
          })
        }

      },
      onDelete(res) {
        deleteCustomerAddrById(res.customerAddrId).then((res) =>{
          Toast({
            message: "删除成功",
            position: "top"
          });
          this.$router.go(-1)
        })
      },
    },
  }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
</style>
